<!doctype html>
<html>
<head>
  <style>
    html, body, #map {
      height: 100%;
      margin: 0;
    }
    #controls {
      font-family: sans-serif;
      padding-left: 50px;
      -webkit-appearance: none;
    }
    #controls > * {
      zoom: 1.4;
    }
  </style>
<script type="text/javascript"
        src="http://maps.googleapis.com/maps/api/js?sensor=false&libraries=weather"></script>
<script>
  var map, weatherLayer, cloudLayer;
  var cloudsVisible, iconsVisible, blackLabels;
  var celsius = google.maps.weather.TemperatureUnit.CELSIUS;
  var fahrenheit = google.maps.weather.TemperatureUnit.FAHRENHEIT;
  var mph = google.maps.weather.WindSpeedUnit.MILES_PER_HOUR;
  var kph = google.maps.weather.WindSpeedUnit.KILOMETERS_PER_HOUR;
  var ms = google.maps.weather.WindSpeedUnit.METERS_PER_SECOND;
  var auto = null;
  var black = google.maps.weather.LabelColor.BLACK;
  var white = google.maps.weather.LabelColor.WHITE;
  
  function initialize() {
    map = new google.maps.Map(document.getElementById('map'), {
      center: new google.maps.LatLng(37.7762, -122.4401),
      zoom: 5,
      mapTypeId: 'roadmap',
      streetViewControl: false,
      zoomControl: false,
      panControl: false,
      mapTypeId: google.maps.MapTypeId.SATELLITE,
      mapTypeControlOptions: {
        position: google.maps.ControlPosition.TOP_CENTER
      }
    });

    map.controls[google.maps.ControlPosition.BOTTOM_LEFT].push(
        document.querySelector('#controls'));

    weatherLayer = new google.maps.weather.WeatherLayer;
    weatherLayer.setMap(map);

    cloudLayer = new google.maps.weather.CloudLayer;
    cloudLayer.setMap(map);

    iconsVisible = cloudsVisible = blackLabels = true;
  }

  function toggleClouds() {
    cloudsVisible = !cloudsVisible;
    if (cloudsVisible) {
      cloudLayer.setMap(map);
    } else {
      cloudLayer.setMap(null);
    }
  }

  function toggleIcons() {
    iconsVisible = !iconsVisible;
    if (iconsVisible) {
      weatherLayer.setMap(map);
    } else {
      weatherLayer.setMap(null);
    }
  }

  function setLabelColor(color) {
    weatherLayer.setOptions({'labelColor': color});
  }

  function setTemperature(units) {
    weatherLayer.setOptions({'temperatureUnits': units});
  }

  function setWindSpeed(units) {
    weatherLayer.setOptions({'windSpeedUnits': units});
  }
</script>
</head>
<body onload="initialize()">
  <div id="map"></div>
  <div id=controls>
  <button onclick="toggleClouds()">Clouds</button>
  <button onclick="toggleIcons()">Icons</button>
  </div>
<script type="text/javascript"> var _gaq = _gaq || []; _gaq.push(['_setAccount', 'UA-12846745-1']); _gaq.push(['_trackPageview']); (function() { var ga = document.createElement('script'); ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; ga.setAttribute('async', 'true'); document.documentElement.firstChild.appendChild(ga); })();</script></body>
</html>